<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>AI Cloud</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">AI Cloud</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul id="chat-nav" class="layui-nav layui-layout-left layui-this" style="display: none">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="chat-chatgpt-content"><a href="javascript:;">ChatGPT</a></li>

            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="chat-tongyi-content"><a href="javascript:;">通义大模型</a></li>

            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="chat-xunfei-content"><a href="javascript:;">讯飞星火</a></li>

            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="chat-wenxin-content"><a href="javascript:;">文心一言</a></li>

            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="chat-doubao-content"><a href="javascript:;">豆包大模型</a></li>

        </ul>
        <ul id="draw-nav" class="layui-nav layui-layout-left" style="display: none">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="draw-chatgpt-content"><a href="javascript:;">ChatGPT</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="draw-tongyi-content"><a href="javascript:;">通义大模型</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="draw-xunfei-content"><a href="javascript:;">讯飞星火</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="draw-wenxin-content"><a href="javascript:;">文心一言</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="draw-doubao-content"><a href="javascript:;">豆包大模型</a></li>

        </ul>
        <ul id="discuss-nav" class="layui-nav layui-layout-left" style="display: none">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="discuss-content"><a href="javascript:;">推荐</a></li>

            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"
                lay-data="discuss-content-new"><a href="javascript:;">最新</a></li>
        </ul>
        <ul id="discuss-add-nav" class="layui-nav layui-layout-left" style="display: none">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <div id="user-info">
                    <a href="javascript:;">
                        <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                        <span id="username_span">tester</span>
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">Your Profile</a></dd>
                        <dd><a href="javascript:;">设置</a></dd>
                        <dd lay-on="logout"><a href="javascript:;">退出登录</a></dd>
                    </dl>
                </div>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">AI 工具箱</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" lay-on="chat-nav-show">对话</a></dd>
                        <dd><a href="javascript:;" lay-on="draw-nav-show">绘图</a></dd>
                    </dl>
                </li>

                <li class="layui-nav-item">
                    <a href="javascript:;">话题讨论</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" lay-on="discuss-show">话题列表</a></dd>
                        <dd><a href="javascript:;" lay-on="discuss-mine">我的话题</a></dd>
                        <dd><a href="javascript:;" lay-on="discuss-add">发表话题</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:;">关于</a></li>
            </ul>
            <div id="unlogin_btn_div" style="position: absolute; bottom: 20px;text-align: center;width: 84%">
                <button type="button" class="layui-btn layui-btn-lg" lay-on="doLogin">未登录</button>
            </div>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding-top: 15px; padding-bottom: 80px">
            <div>
                <!--对话-->
                <div id="chat-chatgpt-content" class="layui-card layui-panel" style="display: none">
                    <!--<div class="layui-card layui-panel">
                        <div class="layui-card-header layui-font-16">
                            给 chatgpt 提出的问题
                        </div>
                        <div class="layui-card-body">
                            chatgpt 回答内容
                        </div>
                    </div>-->
                </div>
                <div id="chat-tongyi-content" class="layui-card layui-panel" style="display: none">

                </div>
                <div id="chat-xunfei-content" class="layui-card layui-panel" style="display: none">

                </div>
                <div id="chat-wenxin-content" class="layui-card layui-panel" style="display: none">

                </div>

                <div id="chat-doubao-content" class="layui-card layui-panel" style="display: none">

                </div>

                <!--绘画-->
                <div id="draw-chatgpt-content" class="layui-card layui-panel" style="display: none">
                    <!--<div class="layui-card layui-panel">
                        <div class="layui-card-header layui-font-16">
                            给 chatgpt 提出的问题
                        </div>
                        <div class="layui-card-body">
                            <img src="xxx">
                        </div>
                    </div>-->
                </div>
                <div id="draw-tongyi-content" class="layui-card layui-panel" style="display: none">

                </div>
                <div id="draw-xunfei-content" class="layui-card layui-panel" style="display: none">

                </div>
                <div id="draw-wenxin-content" class="layui-card layui-panel" style="display: none">

                </div>

                <div id="draw-doubao-content" class="layui-card layui-panel" style="display: none">

                </div>

                <!--话题讨论-推荐-->
                <div id="discuss-content" style="display: none">
                    <div id="discuss-list-support">

                    </div>
                    <div id="discuss-page"></div>
                </div>
                <!--话题讨论-最新-->
                <div id="discuss-content-new" style="display: none">
                    <div id="discuss-list-new">

                    </div>
                    <div id="discuss-page-new"></div>
                </div>
                <!--添加话题-->
                <div id="discuss-content-add" style="display: none">
                    <div class="layui-input-group" style="width: 85%;margin-top: 50px">
                        <div class="layui-input-prefix" style="width: 200px;font-size: larger;font-weight: bold;">标题
                        </div>
                        <input id="discuss-title-input" placeholder="请输入话题标题" type="text" class="layui-input"
                               style="height: 50px">
                    </div>

                    <div class="layui-input-group" style="width: 85%;margin-top: 25px">
                        <div class="layui-input-prefix" style="width: 200px;font-size: larger;font-weight: bold">正文
                        </div>
                        <textarea id="discuss-content-input" name="" placeholder="请输入话题内容" class="layui-textarea"
                                  style="height: 500px"></textarea>
                    </div>

                    <div style="margin-top: 25px;text-align: center">
                        <button lay-on="doAddDiscuss" type="button" class="layui-btn layui-btn-fluid  layui-btn-lg"
                                style="width: 50%;">添加
                        </button>
                    </div>
                </div>
                <!--我的话题列表-->
                <div id="discuss-content-mine" style="display: none">
                    <div class="layui-bg-gray" style="padding: 16px;">
                        <div id="my-discuss-list" class="layui-row layui-col-space15">


                        </div>
                    </div>
                </div>
                <!--我的话题详情-->
                <div id="discuss-detail-div" style="padding-top: 20px;padding-left: 40px;display: none">
                    <!--                    <h2>标题</h2>-->
                    <!--                    <div style="margin: 10px">-->
                    <!--                        作者：<span>张三</span> &nbsp;-->
                    <!--                        发布时间：<span>2023-01-01 00:00:00</span>&nbsp;-->
                    <!--                        阅读量：<span>100</span>&nbsp;-->
                    <!--                        点赞量：<span>100</span>-->
                    <!--                    </div>-->
                    <!--                    <div style="padding-top: 30px">-->
                    <!--                        正文.......................................-->
                    <!--                    </div>-->
                    <!--                    <hr>-->

                    <!--                    <div style="margin: 18px;">-->
                    <!--                        <i class="layui-icon layui-icon-praise" style="font-size: 30px; color: #0f801b;">点赞</i>-->
                    <!--                    </div>-->
                    <!--                    <hr>-->
                    <!--                    <div style="margin-top: 30px">-->
                    <!--                        <h3>发表评论</h3>-->
                    <!--                        <div style="margin-top: 10px">-->
                    <!--                            <div class="layui-input-group">-->
                    <!--                                <div class="layui-input-prefix"> 张三：</div>-->
                    <!--                                <textarea name="" placeholder="请输入评论" class="layui-textarea" style="width: 1000px;"></textarea>-->

                    <!--                            </div>-->
                    <!--                            <div>-->
                    <!--                                <button type="button" class="layui-btn" style="margin-left: 1000px;"> 提交 </button>-->
                    <!--                            </div>-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                    <!--                    <hr>-->
                    <!--                    <div style="margin-top: 30px">-->
                    <!--                        <h3>评论列表</h3>-->
                    <!--                        <div style="margin-top: 20px">-->
                    <!--                            <b>张三：xxxxxxxxxxx</b>-->
                    <!--                        </div>-->
                    <!--                        <div style="margin-top: 20px">-->
                    <!--                            <b>张三：xxxxxxxxxxx</b>-->
                    <!--                        </div>-->
                    <!--                        <div style="margin-top: 20px">-->
                    <!--                            <b>张三：xxxxxxxxxxx</b>-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                </div>
            </div>
        </div>
    </div>
    <div id="chat-footer" class="layui-footer" style="height: 80px; line-height: 80px; display: none">
        <!-- 底部固定区域 -->
        <div style="width: 80%">
            <div class="layui-input-group" style="width: 100%">
                <input id="question-input" style="margin-top: 20px; margin-left: 160px" type="text"
                       placeholder="请输入您的问题"
                       class="layui-input">
                <div class="layui-input-suffix">
                    <button id="question-send" type="button" style="margin-left: 80px;" lay-on="question-send"
                            class="layui-btn layui-btn-radius">发送
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/layui/layui.js"></script>
<script src="/js/ajaxutil.js"></script>
<script src="/js/constants.js"></script>
<script src="/js/marked.min.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util', 'laypage'], function () {
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var jQuery = layui.$;
        var laypage = layui.laypage;
        var questionType = "chat"; // 默认当前使用的是聊天功能
        var isFirstLoadDrawHistory = true; // 是否是第一次加载绘画历史记录

        // 登录状态判断
        function isLogin() {
            if (layui.data(login_user_info_key).authorization) { // 已登录
                // 如果存在token，隐藏未登录按钮
                jQuery("#unlogin_btn_div").hide();
                // 显示用户信息
                jQuery("#user-info").show();
                // 填充用户名
                jQuery("#username_span").html(layui.data(login_user_info_key).username);
                jQuery("#question-input").remove("disabled");
                jQuery("#question-send").remove("disabled");
            } else { // 未登录
                // 显示未登录按钮
                jQuery("#unlogin_btn_div").show();
                // 隐藏用户信息
                jQuery("#user-info").hide();
                jQuery("#question-input").attr("disabled", "disabled");
                jQuery("#question-send").attr("disabled", "disabled");
            }
        }

        // 封装问答HTML
        function createChatQuestionAnswerHTML(question, answer) {
            return '<div class="layui-card layui-panel">\n' +
                '                        <div class="layui-card-header layui-font-16">\n' +
                question + '                            \n' +
                '                        </div>\n' +
                '                        <div class="layui-card-body">\n' +
                marked.parse(answer) + '                            \n' +
                '                        </div>\n' +
                '                    </div>';
        }

        function createDrawQuestionAnswerHTML(question, url) {
            return ' <div class="layui-card layui-panel">\n' +
                '                        <div class="layui-card-header layui-font-16">\n' +
                question + '                            \n' +
                '                        </div>\n' +
                '                        <div class="layui-card-body">\n' +
                '                            <img src="' + url + '">\n' +
                '                        </div>\n' +
                '                    </div>';
        }


        // ===================================获取历史记录=======================================//
        // 获取聊天记录基础回调方法
        function baseChatHistoryCallback(showDiv, res) {
            let html;
            if (res.code === 200) {
                html = "";
                for (let i = 0; i < res.data.length; i++) {
                    const answer = res.data[i];
                    html += createChatQuestionAnswerHTML(answer.question, answer.answer);
                }
            }
            jQuery("#" + showDiv).html(html);
        }

        // 获取绘画记录基础回调方法
        function baseDrawHistoryCallback(showDiv, res) {
            let html;
            if (res.code === 200) {
                html = "";
                for (let i = 0; i < res.data.length; i++) {
                    const answer = res.data[i];
                    html += createDrawQuestionAnswerHTML(answer.question, answer.answer);
                }
            }
            jQuery("#" + showDiv).html(html);
        }

        // 获取 OpenAi 聊天记录
        function showOpenAiChatHistory() {
            function doShowList(res) {
                baseChatHistoryCallback("chat-chatgpt-content", res);
            }

            authAjax(jQuery, "/openai/chatHistory", null, "get", doShowList);
        }

        // 获取 OpenAi 绘画记录
        function showOpenAiDrawHistory() {
            if (isFirstLoadDrawHistory) {
                function doShowList(res) {
                    baseDrawHistoryCallback("draw-chatgpt-content", res)
                }

                authAjax(jQuery, "/openai/drawHistory", null, "get", doShowList);
            }
        }

        // 获取通义大模型聊天记录
        function showTongyiChatHistory() {
            function doShowList(res) {
                baseChatHistoryCallback("chat-tongyi-content", res);
            }

            authAjax(jQuery, "/tongyi/chatHistory", null, "get", doShowList);
        }

        // 获取通义大模型绘画记录
        function showTongyiDrawHistory() {
            if (isFirstLoadDrawHistory) {
                function doShowList(res) {
                    baseDrawHistoryCallback("draw-tongyi-content", res)
                }

                authAjax(jQuery, "/tongyi/drawHistory", null, "get", doShowList);
            }
        }

        // 获取讯飞大模型聊天记录
        function showXunFeiChatHistory() {
            function doShowList(res) {
                baseChatHistoryCallback("chat-xunfei-content", res);
            }

            authAjax(jQuery, "/xunfei/chatHistory", null, "get", doShowList);
        }

        // 获取讯飞大模型绘画记录
        function showXunFeiDrawHistory() {
            if (isFirstLoadDrawHistory) {
                function doShowList(res) {
                    baseDrawHistoryCallback("draw-xunfei-content", res)
                }

                authAjax(jQuery, "/xunfei/drawHistory", null, "get", doShowList);
            }
        }

        // 获取千帆大模型聊天记录
        function showQianFanChatHistory() {
            function doShowList(res) {
                baseChatHistoryCallback("chat-wenxin-content", res);
            }

            authAjax(jQuery, "/qianfan/chatHistory", null, "get", doShowList);
        }

        // 获取千帆大模型绘画记录
        function showQianFanDrawHistory() {
            if (isFirstLoadDrawHistory) {
                function doShowList(res) {
                    baseDrawHistoryCallback("draw-wenxin-content", res)
                }

                authAjax(jQuery, "/qianfan/drawHistory", null, "get", doShowList);
            }
        }

        // 获取豆包大模型聊天记录
        function showDoubaoChatHistory() {
            function doShowList(res) {
                baseChatHistoryCallback("chat-doubao-content", res);
            }

            authAjax(jQuery, "/doubao/chatHistory", null, "get", doShowList);
        }

        // 获取千帆大模型绘画记录
        function showDoubaoDrawHistory() {
            if (isFirstLoadDrawHistory) {
                function doShowList(res) {
                    baseDrawHistoryCallback("draw-doubao-content", res)
                }

                authAjax(jQuery, "/doubao/drawHistory", null, "get", doShowList);
            }
        }

        // ===================================获取历史记录=======================================//


        // =====================================对话和绘图功能=====================================//

        // 聊天回调基础方法
        function baseChatCallback(showDiv, question, res) {
            if (res.code === 200) {
                // 显示回答, 放在最前面
                jQuery("#" + showDiv).prepend(
                    createChatQuestionAnswerHTML(question, res.data)
                );
                jQuery("#question-input").val("");
            } else {
                layer.msg("出错了：" + res.msg);
            }
        }

        // 绘画回调基础方法
        function baseDrawCallback(showDiv, question, res) {
            if (res.code === 200) {
                // 显示答案, 放在最前面
                jQuery("#" + showDiv).prepend(
                    createDrawQuestionAnswerHTML(question, res.data)
                );
                jQuery("#question-input").val("");
            } else {
                layer.msg("出错了：" + res.msg);
            }
        }


        // 调用OpenAI的聊天功能
        function doOpenAIChat(question) {
            function callback(res) {
                baseChatCallback("chat-chatgpt-content", res)
            }

            authAjax(jQuery, "/openai/chat", {question: question}, "POST", callback);
        }

        function doOpenAIDraw(question) {
            function callback(res) {
                baseDrawCallback("draw-chatgpt-content", res)
            }

            authAjax(jQuery, "/openai/draw", {question: question}, "POST", callback);
        }

        // 调用通义大模型聊天功能
        function doTongYiChat(question) {
            function callback(res) {
                baseChatCallback("chat-tongyi-content", question, res)
            }

            authAjax(jQuery, "/tongyi/chat", {question: question}, "POST", callback);
        }

        // 调用通义大模型绘画功能
        function doTongyiDraw(question) {
            function callback(res) {
                baseDrawCallback("draw-tongyi-content", question, res)
            }

            authAjax(jQuery, "/tongyi/draw", {question: question}, "POST", callback);
        }

        // 调用讯飞大模型聊天功能
        function doXunFeiChat(question) {
            function callback(res) {
                baseChatCallback("chat-xunfei-content", question, res)
            }

            authAjax(jQuery, "/xunfei/chat", {question: question}, "POST", callback);
        }

        // 调用讯飞大模型绘画功能
        function doXunFeiDraw(question) {
            function callback(res) {
                baseDrawCallback("draw-xunfei-content", question, res)
            }

            authAjax(jQuery, "/xunfei/draw", {question: question}, "POST", callback);
        }

        // 调用千帆大模型聊天功能
        function doQianFanChat(question) {
            function callback(res) {
                baseChatCallback("chat-wenxin-content", question, res)
            }

            authAjax(jQuery, "/qianfan/chat", {question: question}, "POST", callback);
        }

        // 调用千帆大模型绘画功能
        function doQianFanDraw(question) {
            function callback(res) {
                baseDrawCallback("draw-wenxin-content", question, res)
            }

            authAjax(jQuery, "/qianfan/draw", {question: question}, "POST", callback);
        }

        // 调用豆包大模型聊天功能
        function doDouBaoChat(question) {
            function callback(res) {
                baseChatCallback("chat-doubao-content", question, res)
            }

            authAjax(jQuery, "/doubao/chat", {question: question}, "POST", callback);
        }

        // 调用豆包大模型绘画功能
        function doDouBaoDraw(question) {
            function callback(res) {
                baseDrawCallback("draw-doubao-content", question, res)
            }

            authAjax(jQuery, "/doubao/draw", {question: question}, "POST", callback);
        }

        // =====================================对话和绘图功能=====================================//
        // =====================================话题讨论功能=====================================//

        function createMyDiscussListHTML(data) {
            var myDiscussListHtml = "";
            for (let i = 0; i < data.length; i++) {
                var discuss = data[i];
                myDiscussListHtml += '<div class="layui-col-md6">\n' +
                    '                                <div class="layui-card">\n' +
                    '                                    <div class="layui-card-header">\n' +
                    '<a lay-on="doShowDiscuss" lay-data="' + discuss.did + '">' +
                    discuss.title + '</a>                                        \n' +
                    '                                        <a lay-on="doDeleteDiscuss" lay-data="' +
                    discuss.did + '" href="javascript:;" style="position: absolute;right: 20px;">删除</a>\n' +
                    '                                    </div>\n' +
                    '                                    <div class="layui-card-body">\n'
                    + discuss.content +
                    '                                        \n' +
                    '                                    </div>\n' +
                    '                                </div>\n' +
                    '                            </div>';
            }
            return myDiscussListHtml;
        }

        function showMyDiscussList() {
            function callback(res) {
                if (res.code === 200) {
                    jQuery("#my-discuss-list").html(createMyDiscussListHTML(res.data));
                } else {
                    layer.msg("出错了：" + res.msg);
                }
            }

            authAjax(jQuery, "/discuss/mylist", {}, "GET", callback)
        }

        // =====================================话题讨论功能=====================================//

        function doDiscussList(type, showDiv, pageDiv) {
            function callback(res) {
                if (res.code === 200) {
                    var createHtml = '';
                    if (res.data.records.length > 0) {
                        for (let i = 0; i < res.data.records.length; i++) {
                            let discuss = res.data.records[i];
                            createHtml += '<div class="layui-card layui-panel">\n' +
                                '                            <div lay-on="doShowDiscuss" lay-data="' + discuss.did + '" class="layui-card-header layui-font-16">\n' +
                                discuss.title +
                                '                                \n' +
                                '                            </div>\n' +
                                '                            <div class="layui-card-body">\n' +
                                discuss.content +
                                '                                \n' +
                                '                            </div>\n' +
                                '                        </div>';
                        }
                    } else {
                        createHtml += '<h3>暂无数据！</h3>'
                    }
                    jQuery("#" + showDiv).html(createHtml);

                    // 绘制分页列表
                    laypage.render({
                        elem: pageDiv,
                        count: res.data.total, // 数据总数
                        limit: 5, // 每页显示数量
                        curr: res.data.current, // 当前页
                        jump: function (obj, first) {
                            // 首次不执行
                            if (!first) {
                                authAjax(jQuery, "/discuss/list", {
                                    pageNum: obj.curr,
                                    type: type
                                }, "GET", callback)
                            }
                        }
                    });
                } else {
                    layer.msg("出错了：" + res.msg);
                }
            }

            authAjax(jQuery, "/discuss/list", {
                pageNum: 1,
                type: type
            }, "GET", callback)
        }

        // 页面加载完成之后的初始化事件
        layer.ready(function () {
            // 登录状态判断
            isLogin();
            // 获取历史的问答信息
            showOpenAiChatHistory();
            showTongyiChatHistory();
            showXunFeiChatHistory();
            showQianFanChatHistory();
            showDoubaoChatHistory();
        });

        util.on('lay-on', {
            'discuss-show': function () {
                jQuery("#chat-nav").hide();
                jQuery("#draw-nav").hide();
                jQuery("#discuss-nav").show();
                // 标签页重置显示第一个
                var showDivId = "discuss-content";
                jQuery("#" + showDivId).show(); // 显示自己
                jQuery("#" + showDivId).siblings().hide(); // 隐藏同级div的内容
                jQuery("#discuss-nav").find("li").removeClass("layui-this");
                jQuery("#discuss-nav").find("li").eq(1).addClass("layui-this");
                // 隐藏聊天输入框
                jQuery("#chat-footer").hide();

                // 查询推荐列表

                // 查询推荐列表
                doDiscussList(1, "discuss-list-support", "discuss-page")

            },
            'discuss-add': function () { // 添加话题
                jQuery("#chat-nav").hide();
                jQuery("#draw-nav").hide();
                jQuery("#discuss-nav").hide();
                jQuery("#discuss-add-nav").show();
                // 标签页重置显示第一个
                var showDivId = "discuss-content-add";
                jQuery("#" + showDivId).show(); // 显示自己
                jQuery("#" + showDivId).siblings().hide(); // 隐藏同级div的内容
                jQuery("#discuss-nav").find("li").removeClass("layui-this");
                jQuery("#discuss-nav").find("li").eq(1).addClass("layui-this");
                // 隐藏聊天输入框
                jQuery("#chat-footer").hide();
            },
            'discuss-mine': function () { // 我的话题列表
                jQuery("#chat-nav").hide();
                jQuery("#draw-nav").hide();
                jQuery("#discuss-nav").hide();
                jQuery("#discuss-add-nav").hide();
                // 标签页重置显示第一个
                var showDivId = "discuss-content-mine";
                jQuery("#" + showDivId).show(); // 显示自己
                jQuery("#" + showDivId).siblings().hide(); // 隐藏同级div的内容
                jQuery("#discuss-nav").find("li").removeClass("layui-this");
                jQuery("#discuss-nav").find("li").eq(1).addClass("layui-this");
                // 隐藏聊天输入框
                jQuery("#chat-footer").hide();

                // 获取我的话题列表
                showMyDiscussList();
            },
            'doAddDiscuss': function () { // 添加话题点击事件
                // 1. 非空判断
                var title = jQuery("#discuss-title-input");
                var content = jQuery("#discuss-content-input");
                if (title.val() === null || title.val().trim() === "") {
                    layer.msg("请输入话题标题！");
                    title.focus();
                    return;
                }
                if (content.val() === null || content.val().trim() === "") {
                    layer.msg("请输入话题内容！");
                    content.focus();
                    return;
                }

                function callback(res) {
                    if (res.code === 200) {
                        layer.msg("添加成功！");
                        jQuery("#discuss-title-input").val("");
                        jQuery("#discuss-content-input").val("");
                    } else {
                        layer.msg("添加失败：" + res.msg);
                    }
                }

                // 2. 调用后台接口
                authAjax(jQuery, "/discuss/add", {
                    title: title.val(),
                    content: content.val()
                }, "POST", callback);

                // 3. 展示操作结果
            },
            'doDeleteDiscuss': function (data) { // 删除话题点击事件
                layer.confirm('确认删除?', {
                    title: '删除话题',
                    btn: ['确定', '取消'] //按钮
                }, function (index) {
                    // 执行删除
                    var did = jQuery(data).attr("lay-data");

                    function callback(res) {
                        if (res.code === 200) {
                            layer.msg("删除成功！");
                            jQuery("#my-discuss-list").find("[lay-data='" + did + "']").parent().parent().parent().remove();
                        } else {
                            layer.msg("删除失败：" + res.msg);
                        }
                    }

                    authAjax(jQuery, "/discuss/delete", {did: did}, "DELETE", callback);
                    layer.close(index);

                }, function () {
                });
            },
            'doShowDiscuss': function (obj) { // 点击查看话题详情
                jQuery("#chat-nav").hide();
                jQuery("#draw-nav").hide();
                jQuery("#discuss-nav").hide();
                jQuery("#discuss-add-nav").hide();
                // 标签页重置显示第一个
                var showDivId = "discuss-detail-div";
                jQuery("#" + showDivId).show(); // 显示自己
                jQuery("#" + showDivId).siblings().hide(); // 隐藏同级div的内容
                jQuery("#discuss-nav").find("li").removeClass("layui-this");
                jQuery("#discuss-nav").find("li").eq(1).addClass("layui-this");
                // 隐藏聊天输入框
                jQuery("#chat-footer").hide();

                // 获取话题详情
                var did = jQuery(obj).attr("lay-data");

                // 获取话题详情的回调事件
                function callback(res) {
                    if (res.code === 200) {
                        var discuss = res.data.discuss;
                        var commentList = res.data.commentList;

                        var html = '<h2>' + discuss.title + '</h2>\n' +
                            '                    <div style="margin: 10px">\n' +
                            '                        作者：<span>' + discuss.nickName + '</span> &nbsp;\n' +
                            '                        发布时间：<span>' + discuss.createtime + '</span>&nbsp;\n' +
                            '                        阅读量：<span>' + discuss.readcount + '</span>&nbsp;\n' +
                            '                        点赞量：<span id="discuss-support-count">' + discuss.supportcount + '</span>\n' +
                            '                    </div>\n' +
                            '                    <div style="padding-top: 30px">\n' +
                            discuss.content +
                            '                        \n' +
                            '                    </div>\n' +
                            '                    <hr>\n' +
                            '\n' +
                            '                    <div style="margin: 18px;">\n' +
                            '                        <i lay-on="doSupport" lay-data="' + discuss.did + '" class="layui-icon layui-icon-praise" style="font-size: 18px; color: #0f801b;">点赞</i>\n' +
                            '                    </div>\n' +
                            '                    <hr>\n' +
                            '                    <div style="margin-top: 30px">\n' +
                            '                        <h3>发表评论</h3>\n' +
                            '                        <div style="margin-top: 10px">\n' +
                            '                            <div class="layui-input-group">\n' +
                            '                                <div class="layui-input-prefix"> ' + layui.data(login_user_info_key).username + '：</div>\n' +
                            '                                <textarea id="comment-content" name="" placeholder="请输入评论" class="layui-textarea" style="width: 1000px;"></textarea>\n' +
                            '\n' +
                            '                            </div>\n' +
                            '                            <div>\n' +
                            '                                <button type="button" lay-on="add-comment" lay-data="' + discuss.did + '" class="layui-btn" style="margin-left: 1000px;"> 提交 </button>\n' +
                            '                            </div>\n' +
                            '                        </div>\n' +
                            '                    </div>\n' +
                            '                    <hr>\n' +
                            '                    <div style="margin-top: 30px">\n' +
                            '                        <h3 style="margin-bottom: 30px">评论列表</h3>\n<div id="comment-list">';

                        if (commentList != null && commentList.length > 0) {
                            for (let i = 0; i < commentList.length; i++) {
                                var comment = commentList[i];
                                html += '<div style="margin-top: 20px">\n' +
                                    '       <b>' + comment.nickname + '：' +
                                    comment.content + '</b>\n' +
                                    '   </div>\n';
                            }
                        } else {
                            html += '<h4>暂无评论！</h4>';
                        }

                        html += '</div></div>';
                        jQuery("#discuss-detail-div").html(html);
                    } else {
                        layer.msg("获取话题详情失败：" + res.msg);
                    }
                }

                authAjax(jQuery, "/discuss/detail", {did: did}, "GET", callback)
            },
            'add-comment': function (obj) { // 添加评论
                // 获取did
                var did = jQuery(obj).attr("lay-data");
                // 获取评论内容
                var content = jQuery("#comment-content");
                if (content.val() == null || content.val() === "") {
                    layer.msg("评论内容不能为空！");
                    content.focus();
                    return;
                }
                authAjax(jQuery, "/comment/add", {
                        did: did,
                        content: content.val()
                    }, "POST",
                    function (res) {
                        if (res.code === 200) {
                            layer.msg("评论成功！");
                            var html = '<div style="margin-top: 20px">\n' +
                                '       <b>' + layui.data(login_user_info_key).username + '：' +
                                content.val() + '</b>\n' +
                                '   </div>\n';
                            if (jQuery("#comment-list").find("div").length === 0) {
                                jQuery("#comment-list").html(html);
                            } else {
                                jQuery("#comment-list").prepend(html);
                            }
                            content.val("");
                        } else {
                            layer.msg("评论失败：" + res.msg);
                        }
                    });
            },
            'doSupport': function (obj) { // 点赞事件
                var did = jQuery(obj).attr("lay-data");
                authAjax(jQuery, "/discuss/support", {did: did}, "POST", function (res) {
                    if (res.code === 200) {
                        layer.msg("点赞成功！");
                        jQuery("#discuss-support-count").html(parseInt(jQuery("#discuss-support-count").html()) + 1);
                    } else {
                        layer.msg("点赞失败：" + res.msg);
                    }
                });
            },
            'chat-nav-show': function () {
                jQuery("#chat-nav").show();
                jQuery("#draw-nav").hide();
                jQuery("#discuss-nav").hide();
                // 标签页重置显示第一个
                var showDivId = "chat-chatgpt-content";
                jQuery("#" + showDivId).show(); // 显示自己
                jQuery("#" + showDivId).siblings().hide(); // 隐藏同级div的内容
                jQuery("#chat-nav").find("li").removeClass("layui-this");
                jQuery("#chat-nav").find("li").eq(1).addClass("layui-this");
                // 显示聊天输入框
                jQuery("#chat-footer").show();
                // 更改当前的问题类型
                questionType = "chat";
            },
            'draw-nav-show': function () {
                jQuery("#chat-nav").hide();
                jQuery("#draw-nav").show();
                jQuery("#discuss-nav").hide();
                // 标签页重置显示第一个
                var showDivId = "draw-chatgpt-content";
                jQuery("#" + showDivId).show(); // 显示自己
                jQuery("#" + showDivId).siblings().hide(); // 隐藏同级div的内容
                jQuery("#draw-nav").find("li").removeClass("layui-this");
                jQuery("#draw-nav").find("li").eq(1).addClass("layui-this");
                // 显示聊天输入框
                jQuery("#chat-footer").show();
                // 更改当前的问题类型
                questionType = "draw";

                // 获取历史的绘画信息
                showOpenAiDrawHistory();
                showTongyiDrawHistory();
                showXunFeiDrawHistory();
                showQianFanDrawHistory();
                showDoubaoDrawHistory();

                isFirstLoadDrawHistory = false;
            },
            'nav-change-content': function (e) { // 根据标签页切换不同的内容
                var showDivId = jQuery(e).attr("lay-data");
                jQuery("#" + showDivId).show(); // 显示自己
                jQuery("#" + showDivId).siblings().hide(); // 隐藏同级div的内容
                if (showDivId === 'discuss-content-new') {
                    // 请求最新的话题列表进行展示
                    doDiscussList(2, "discuss-list-new", "discuss-page-new");
                }
                if (showDivId === 'discuss-content') {
                    doDiscussList(1, "discuss-list-support", "discuss-page");
                }
            },
            'question-send': function () { // 发送问题
                var question = jQuery("#question-input").val();
                if (question == null || question === "") {
                    layer.msg("请输入您的问题");
                    return;
                }
                // 判断是绘画还是对话
                if (questionType === "chat") { // 当前使用的是对话功能
                    // doOpenAIChat(question); // 调用OpenAI的聊天功能
                    // doTongYiChat(question); // 调用通义大模型的聊天功能
                    // doXunFeiChat(question); // 调用讯飞大模型的聊天功能
                    // doQianFanChat(question); // 调用千帆大模型的聊天功能
                    doDouBaoChat(question); // 调用豆包大模型的聊天功能
                } else if (questionType === "draw") { // 当前使用的是绘画功能
                    doOpenAIDraw(question); // 调用OpenAI的绘画功能
                    doTongyiDraw(question); // 调用通义大模型的绘画功能
                    doXunFeiDraw(question); // 调用讯飞大模型的绘画功能
                    doQianFanDraw(question); // 调用千帆大模型的绘画功能
                    // doDouBaoDraw(question); // 调用豆包大模型的绘画功能
                }
            },
            'doLogin': function () { // 弹出登录框
                layer.open({
                    type: 2,
                    title: '登录',
                    area: ['550px', '480px'],
                    content: '/login.html',
                    fixed: false, // 不固定
                    maxmin: false,
                    shadeClose: false,
                    move: false,
                    btnAlign: 'c',
                });
            },
            "logout": function () { // 退出登录事件
                // 弹框，是否退出
                layer.confirm('确认退出登录？', {
                    btn: ['确定', '取消'], //按钮
                    title: "退出登录",
                    move: false
                }, function () { // 执行退出操作
                    // 直接删除本地存储的token信息
                    layui.data(login_user_info_key, null);
                    isLogin();
                    layer.msg("退出成功！", {icon: 1});

                }, function () {
                });
            }
        });

        //头部事件
        util.event('lay-header-event', {
            menuLeft: function (othis) { // 左侧菜单事件
                layer.msg('展开左侧菜单的操作', {icon: 0});
            },
            menuRight: function () {  // 右侧菜单事件
                layer.open({
                    type: 1,
                    title: '更多',
                    content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                    area: ['260px', '100%'],
                    offset: 'rt', // 右上角
                    anim: 'slideLeft', // 从右侧抽屉滑出
                    shadeClose: true,
                    scrollbar: false
                });
            }
        });
    });
</script>
</body>
</html>